<style>
.table-div table tr td{border: 1px solid #e6e6e6;padding: 10px;}
.goodlist-table tr td{border: 1px solid #e6e6e6;padding: 10px;}
.form-horizontal .control-group{margin-bottom: 0px;}
.form-horizontal .controls{margin-left: 20px;}
.help-inline{height: 30px;line-height: 30px;}
input[type="radio"]{vertical-align: middle;margin-top: -2px;}
.controls table tr td input[type="radio"]{margin: 0px;}
.ump-select-search select{margin-bottom: 0px}
.btn-dange{color: #fff;background-color: #d00;border-color: #c50000;border: 0;background: red!important;}
.btn-dange:hover{color: #fff;background-color: #d00;border-color: #c50000;border: 0;background: red!important;}
.ump-select-tab{min-width: 750px;margin-bottom: -1px;background: #f2f2f2;border: 1px solid #ddd;}
.ui-nav-tab{margin: 0;}
.ui-nav-tab>li{position: relative;display: block;float: left;text-align: center;margin-bottom: -1px;}
.ui-nav-tab:after{content: "";display: table;clear: both;}
.ump-select-tab .ui-nav-tab li.active a, .ump-select-tab .ui-nav-tab li.active a:hover{height: 40px;line-height: 24px;border-bottom: 2px solid #f60;}
.ump-select-tab .ui-nav-tab li:first-child a{border-left: 0;}
.ump-select-tab .ui-nav-tab li a{width: 120px;border-top: 0;height: 40px;line-height: 25px;padding: 8px 20px;}
.ui-nav-tab>li.active>a, .ui-nav-tab>li.active>a:hover, .ui-nav-tab>li.active>a:focus{color: #333;background-color: #fff;border-bottom-color: transparent;cursor: default;}
.ui-nav-tab>li>a{position: relative;display: block;padding: 9px 15px;margin-right: -1px;line-height: 1.42857143;border: 1px solid #ddd;background-color: #f8f8f8;color: #333;}
.ump-select-box{min-width: 750px;border: 1px solid #ddd;overflow: hidden;}
.ump-select-search{padding: 10px 20px 10px;border-bottom: 1px solid #ddd;position: relative;}
.ump-select-goods .ui-table{background: #fff;}
.ui-table.ui-table-list{border: none;}
.ui-table{width: 100%;font-size: 12px;text-align: left;margin-bottom: 0;border: 1px solid #e5e5e5;}
.ui-table th.checkbox, .ui-table td.checkbox{width: 18px;padding: 10px 0 10px 10px;}
.ui-table th, .ui-table td{padding: 10px;border-bottom: 1px solid #e5e5e5;vertical-align: top;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.ui-table th{background: #f8f8f8;}
.ui-table .cell-20{width: 20%;}
.center, .text-center{text-align: center;}
.ump-select-goods .ui-table tr td{padding: 6px 4px;border-bottom: 1px dashed #ddd;vertical-align: middle;}
.ump-select-goods .goods-image-td, .ump-select-goods .goods-image-td .goods-image,.ump-select-goods .goods-image-td img{width: 30px;}
.ui-box{margin-bottom: 15px;}
.ump-select-footer{padding: 0 20px 0 10px;}
.ump-select-footer .pull-left{padding-bottom: 20px;}
.pull-left{float: left;}
.pagenavi{font-size: 12px;line-height: 16px;text-align: right;}
.ui-btn{display: inline-block;border-radius: 2px;height: 26px;line-height: 26px;padding: 0 12px;cursor: pointer;color: #333;background: #f8f8f8;border: 1px solid #ddd;text-align: center;font-size: 12px;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}
.ui-toolt{position: relative;}
.ui-btn-primary{color: #fff;background-color: #07d!important;border-color: #006cc9;border: 0}
.ui-btn-primary:hover{color: #fff;background-color: #07d!important;border-color: #006cc9;border: 0}
.pagenavi .total, .pagenavi .prev, .pagenavi .next, .pagenavi .num,.pagenavi .goto-input, .pagenavi .goto-btn{display: inline-block;color: #333;}
.pagenavi .total{padding: 6px 0;font-weight: normal !important;}
.ui-table tr td{line-height: normal;}
input[type=number] {
	-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
button{outline:none;}
</style>
<input type="hidden" name="ids" id="ids" value=""  datatype="required" data="选择众筹商品"/>
<dl class="type_dl" style="display: none;">
	
	<dd>
		<label style="vertical-align: middle; font-weight: normal; display: inline-block;">
			<input type="radio" value="1" name="range_type" onclick="ShopRadio(1)"  />
			<span onclick="ShopRadio(1)" style="font-size: 15px; cursor: pointer;">所有商品</span>
		</label>
		<label style="vertical-align: middle; font-weight: normal; display: inline-block;">
			<input type="radio" name="range_type" value="0" onclick="ShopRadio(0)" checked="checked">
			<span onclick="ShopRadio(0)" style="cursor: pointer; font-size: 15px;">部分商品</span>
		</label>
	</dd>
</dl>
<dl>
	<dd id="some_pro" style="width: 99%; display: block;">
		<div class="js-goods-box">
			<div class="ump-select-tab">
				<ul class="ui-nav-tab">
					<li class="js-tab active"><a href="javascript:void(0);" onclick="select_goods(this)">选择商品</a></li>
					<li class="js-tab"><a href="javascript:void(0);" onclick="selected_goods(this)">已选商品</a></li>
				</ul>
			</div>
			<div class="goods-list-wrap">
				<div class="js-goods-list-region js-goods-list-tab select-one"
					style="display: block;">
					<div class="widget-list">
						<div class="ump-select-box js-select-goods-list">
							<div class="ump-goods-wrap">
								<div class="ump-waitting-select ump-goods-list">
									<div class="js-list-filter-region clearfix">
										<div class="widget-list-filter">
											<div class="ump-select-search">
											
												<select name="keyword_type" class="js-search-type">
													<option value="0">商品标题</option>
													<option value="1">商品ID</option>
												</select>
												<input class="js-input" type="text" name="keyword"id="search_goods" placeholder="请输入商品名称/ID" data-goods-title="请输入商品名称/ID" data-goods-no="请输入商品名称/ID" style="width: 200px;" />
												<a href="javascript:;" onclick="LoadingInfo()" class="ui-btn ui-btn-primary js-search" style="display: inline-block;">搜索</a>
											</div>
										</div>
									</div>
									<div class="ump-select-goods">
										<table class="ui-table ui-table-list" style="padding: 0px;">
											<thead
												class="js-list-header-region tableFloatingHeaderOriginal">
												<tr class="widget-list-header">
													<th class=""></th>
													<th colspan="2">商品信息</th>
													<th class="text-center cell-20 kucun">库存</th>
													<th class="text-center cell-20">操作</th>
												</tr>
											</thead>
											<tbody class="js-list-body-region goods-list"></tbody>
										</table>
										<div class="js-list-empty-region"></div>
									</div>
									<div class="js-list-footer-region ui-box">
										<div class="widget-list-footer">
					
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="js-selected-goods-list-region js-goods-list-tab select-two" style="display: none;">
					<div>
						<div class="widget-list-item">
							<div class="ump-select-box js-select-goods-list">
								<div class="ump-goods-wrap">
									<div class="ump-already-select ump-goods-list">
										<div class="ump-select-goods">
											<table class="ui-table ui-table-list js-table"
												style="display:;">
												<thead class="js-list-header-region">
													<tr>
														<th class=""></th>
														<th colspan="2">商品信息</th>
														<th class="cell-20 text-center kucun">库存</th>
														<th class="cell-20 text-center">操作</th>
													</tr>
												</thead>
												<tbody class="js-list-body-region"></tbody>
											</table>
										
										</div>
										<div class="js-list-footer-region ui-box" style="display: none;">
											<div class="ump-select-footer ump-selected-footer">
												<div class="pull-left">
													<label class="checkbox inline"> <input
														type="checkbox" class="js-select-all"
														onclick="select_all(this)" style="margin-left: 0px;">全选
													</label> <a href="javascript:;" class="ui-btn js-batch-remove">批量取消</a>
												</div>
												<div class="js-pagination">
													<div class="ui-pagination"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</dd>
</dl>
<input type="hidden" id="goods_id_array">
<script>
var $goods_selected_array = new Array();

var $goods_id_selected_array = new Array();
var $data_array;

$(".js-batch-add").click(function(){
	var obj = $(".select-one").find("input[name='sub']:checked");
	var html = '';
	obj.each(function(i){
		
		html += '<tr>'+$(".select-one table tbody tr").eq(i).html()+'</tr>';
	});
	$(".select-two tbody").append(html);
});
function join(goods_id,e){
    var data = $goods_selected_array;
    if ($("#selected_" + goods_id).length > 0) {
        return false;
    }else if($goods_selected_array.length>0){
        layer.alert('只能绑定一个商品');
        return　false;
    }else{
		for(var i=0; i<$data_array.length; i++){
			if($data_array[i]['id'] == goods_id){
				console.log($goods_selected_array);
				console.log($goods_id_selected_array);
				$goods_selected_array[$goods_selected_array.length] = $data_array[i];
				$goods_id_selected_array[$goods_id_selected_array.length] = goods_id;
				refresh_data();
				
				break;
			}
	}
		var a = '<a href="javascript:;" class="btn btn-dange js-remove-reward" onclick="cancel_join('+goods_id+',this)">取消参加</a>';
		$(e).parent("td").html(a);
		$("#selected_"+goods_id+" .goods-opt").html(a);
	}
	
}
function cancel_join(goods_id,e){
	if($("#selected_"+goods_id).length > 0){
		for(var i=0; i<$goods_selected_array.length; i++){
			if($goods_selected_array[i]['id'] == goods_id){
				$goods_selected_array.splice(i,1);
				$goods_id_selected_array.splice(i,1);
				refresh_data();
				break;
			}
		}
		var a = '<a href="javascript:;" class="btn ui-btn-primary js-add-reward" onclick="join('+goods_id+',this)">参加众筹</a>';
		$(e).parent("td").html(a);
		$("#select_"+goods_id+" .goods-opt").html(a);
	}
}
function select_all(e){
	if(e.checked == true){
		$(e).parents("div.ump-goods-list").find("input[name='sub']").attr("checked","checked");
	}else{
		$(e).parents("div.ump-goods-list").find("input[name='sub']").attr("checked",false);
	}
}
function select_goods(e){
<php>
    $now_time=date('Y-m-d H:i:s',time());
    if(!empty($crowdfunding_info["start_time"])){
        if($crowdfunding_info["start_time"]<=$now_time){
        </php>
            layer.alert('众筹活动已开始，不能更换产品');
            return false;
        <php>
        }
    }
</php>
	$(e).parents("ul.ui-nav-tab").find(".js-tab").removeClass("active");
	$(e).parent("li").addClass("active");
	$(".select-one").show();
	$(".select-two").hide();
	$("#turn-ul").show();
}
/**
 * 刷新 已选商品
 */
function refresh_data(){
	
	var data = $goods_selected_array;
	var html = "";
	var ids = "";
	for (var i = 0; i < data.length; i++) {
		if(i == data.length-1){
			ids +=data[i]["id"];
		}else{
			ids +=data[i]["id"]+',';
		}
		
		html +='<tr class="widget-list-item" id="selected_'+data[i]["id"]+'"><td >';
		html +='<label><input type="checkbox" value="'+data[i]["id"]+'" name="sub" style="margin-left:0px;display:none;"></label></td>';
		html +='<td class="goods-image-td text-center"><div class="goods-image js-goods-image">';
		html +='<img src="'+data[i]["image"]+'"></div></td>';
		html +='<td class="goods-meta"><p class="goods-title">';
		html +='<a href="javascript:;"  class="new-window" title="'+data[i]["title"]+'">'+data[i]["title"]+'</a></p>';
		html +='<p class="goods-price">'+data[i]["price"]+'</p></td>';
		html +='<td class="text-center">'+data[i]["num"]+'</td>';
      <php>
        $now_time=date('Y-m-d H:i:s',time());
        if($crowdfunding_info["state"]=='0'&&$crowdfunding_info["start_time"]>$now_time){
        </php>
            html +='<td class="text-center goods-opt"><a href="javascript:;" class="btn btn-dange js-remove-reward" onclick="cancel_join('+data[i]["id"]+',this)">取消参加</a></td></tr>';
        <php>
        }
    </php>
    }
	$('#ids').val(ids);
	$(".select-two tbody tr").remove();
	$(".select-two tbody").append(html);
	
}
function selected_goods(e){
	$(e).parents("ul.ui-nav-tab").find(".js-tab").removeClass("active");
	$(e).parents("li").addClass("active");
	$(".select-two").show();
	$(".select-one").hide();
	$("#turn-ul").hide();
}

function LoadingInfo() {
	var type=$('.js-search-type option:selected').val();

	if(type==0){
		var keyword=$('#search_goods').val();
		$.ajax({
		type : "get",
		url : "{:U('Crowdfunding/getsearchgoodslist')}",
		data : {
			"title" : keyword,
		},
		success : function(data) {
			var data = JSON.stringify(data);  
			var data = eval("("+data+")");
			var html = '';
		
			if (data['data']) {
				$data_array=data['data'];
				for (var i = 0; i < data['data'].length; i++) {
					var curr = data['data'][i];
					
					html +='<tr class="widget-list-item" id="select_'+curr["id"]+'"><td></td>';
				
					html +='<td class="goods-image-td text-center"><div class="goods-image js-goods-image">';
					html +='<img src="'+curr["image"]+'"></div></td>';
					
					html +='<td class="goods-meta"><p class="goods-title">';
					html +='<a href="javascript:;"  class="new-window" title="'+curr["title"]+'">'+curr["title"]+'</a></p>';
					html +='<p class="goods-price">'+curr["price"]+'</p></td>';
					html +='<td class="text-center">'+curr["num"]+'</td>';
					if($goods_id_selected_array.length > 0){
						if(jQuery.inArray(curr["goods_id"], $goods_id_selected_array) == "-1"){
							html +='<td class="text-center goods-opt"><a href="javascript:;" class="btn ui-btn-primary js-add-reward" onclick="join('+curr["id"]+',this)" >参加众筹</a></td></tr>';
						}else{
							html +='<td class="text-center goods-opt"><a href="javascript:;" class="btn btn-dange js-remove-reward" onclick="cancel_join('+curr["id"]+',this)">取消参加</a></td></tr>';
						}
					}else{
						html +='<td class="text-center goods-opt"><a href="javascript:;" class="btn ui-btn-primary js-add-reward" onclick="join('+curr["id"]+',this)">参加众筹</a></td></tr>';
					}
				}
			} else {
				
				html += '<tr align="center"><th colspan="5">暂无符合条件的数据记录</th></tr>';
			}
			
			$("tbody.goods-list").html(html);
			}
		});
	}
	if(type==1){
		var keyword=$('#search_goods').val();
		$.ajax({
		type : "get",
		url : "{:U('Crowdfunding/getsearchgoodslist')}",
		data : {
			"id" : keyword,
		},
		success : function(data) {
			var data = JSON.stringify(data);  
			var data = eval("("+data+")");
			var html = '';
			
			if (data['data']) {
				$data_array=data['data'];
				for (var i = 0; i < data['data'].length; i++) {
					var curr = data['data'][i];
					
					html +='<tr class="widget-list-item" id="select_'+curr["id"]+'"><td></td>';
				
					html +='<td class="goods-image-td text-center"><div class="goods-image js-goods-image">';
					html +='<img src="'+curr["image"]+'"></div></td>';
					
					html +='<td class="goods-meta"><p class="goods-title">';
					html +='<a href="javascript:;"  class="new-window" title="'+curr["title"]+'">'+curr["title"]+'</a></p>';
					html +='<p class="goods-price">'+curr["price"]+'</p></td>';
					html +='<td class="text-center">'+curr["num"]+'</td>';
					if($goods_id_selected_array.length > 0){
						if(jQuery.inArray(curr["goods_id"], $goods_id_selected_array) == "-1"){
							html +='<td class="text-center goods-opt"><a href="javascript:;" class="btn ui-btn-primary js-add-reward" onclick="join('+curr["id"]+',this)" >参加众筹</a></td></tr>';
						}else{
							html +='<td class="text-center goods-opt"><a href="javascript:;" class="btn btn-dange js-remove-reward" onclick="cancel_join('+curr["id"]+',this)">取消参加</a></td></tr>';
						}
					}else{
						html +='<td class="text-center goods-opt"><a href="javascript:;" class="btn ui-btn-primary js-add-reward" onclick="join('+curr["id"]+',this)">参加众筹</a></td></tr>';
					}
				}
			} else {
				
				html += '<tr align="center"><th colspan="5">暂无符合条件的数据记录</th></tr>';
			}
			
			$("tbody.goods-list").html(html);
			}
		});
	}
	
}



//控制商品列表显示数据
function ShopRadio(num){
	if(num == 0){
		$("#some_pro").show();
		$("#turn-ul").show();
		$("ul.ui-nav-tab li.js-tab").eq(1).click();
	}else{
		$("#some_pro").hide();
		$("#turn-ul").hide();
	}
}
</script>